//瀑布流
let cols = [
    {left:0, top: 0},
    {left:254, top: 0},
    {left:254*2, top: 0},
    {left:254*3, top: 0}
]
let videoHeight = 0
// var liObj=null;
function waterFall(){
for (let num = 1;num<=56;num++){
    let liObj = document.createElement('li');   //注意这里只能用let
    liObj.style.position='absolute';
    liObj.style.display='none';
    liObj.innerHTML=`
        <div>
            <img src="./assets/imgs2/${num}.jpg" alt="">
        </div>
        <span>${num} 初秋絮语，用音乐记下你的点点滴滴</span>
        <p>
            <i class="iconfont icon-aixin"></i>${num}${num}.6w喜欢
        </p>
    `
    document.querySelector('.video ul').appendChild(liObj);

    liObj.querySelector('img').onload = function() {
        let minTopIndex = 0;
        cols.forEach(function(item,i){
            // minTopIndex = 0;
            if(cols[minTopIndex].top>item.top){
                minTopIndex=i;
            }
        })
        liObj.style.display="block";    
        liObj.style.left=cols[minTopIndex].left+'px';
        liObj.style.top=cols[minTopIndex].top+'px';
        cols[minTopIndex].top+=liObj.offsetHeight;
        videoHeight=cols[minTopIndex].top;
    }
}   
}

// window.onload = function(){
//     waterFall();
// }
window.addEventListener('load', waterFall)
//无限滚动
window.onscroll = function(){
    let h=window.innerHeight || document.documentElement.clientHeight;
    let hscroll=document.documentElement.scrollTop || document.body.scrollTop;
    if(h+hscroll>=videoHeight){
        waterFall();
    }
}


